import React, { Component } from 'react';
import GoBack from '@/components/TheGoBack'

import ThePagination from "@/components/ThePagination";
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import { Form, Select, DatePicker, Button } from 'antd'
import { apiStockLibraryGoodsDetilList } from '@/request/storageManager/stock.js'
import moment from 'moment/moment';
const { Option } = Select
const { RangePicker } = DatePicker;
export default class Stock extends Component {
  constructor() {
    super()
    this.FormRef = React.createRef()
    this.state = {
      columns: [
        {
          title: "序号",
          dataIndex: "index",
          key: "index",
          render: (text, record, index) => {
            return ((this.state.pageData.pageNo - 1) * (this.state.pageData.pageSize) + (index + 1));
          }
        },
        {
          title: "单号",
          dataIndex: "code",
          key: "code",

        },
        {
          title: "类型",
          dataIndex: "typeName",
          key: "typeName",
          render: (text, record) => {
            return record.typeName ? record.typeName : "-"
          }
        },
        {
          title: "入库",
          dataIndex: "inCount",
          key: "inCount",

        },
        {
          title: "出库",
          dataIndex: "outCount",
          key: "outCount",

        },

        {
          title: "盘点盈亏量",
          dataIndex: "takeCount",
          key: "takeCount",

        },

        {
          title: "库存余量",
          dataIndex: "nowCount",
          key: "nowCount",

        },
        {
          title: "平均价",
          dataIndex: "avgPrice",
          key: "avgPrice",
          render: (text, record) => {
            return record.avgPrice >= 0 ? ((record.avgPrice) / 100).toFixed(2) : "-"
          }
        },
        {
          title: "单价",
          dataIndex: "unitPrice",
          key: "unitPrice",
          render: (text, record) => {
            return record.unitPrice >= 0 ? ((record.unitPrice) / 100).toFixed(2) : "-"
          }
        },
        {
          title: "操作人",
          dataIndex: "userName",
          key: "userName",

        },
        {
          title: '操作时间',
          dataIndex: 'finishTime',
          key: 'finishTime'
        }
      ],
      dataSource: [],

      pageData: {
        pageNo: 1,
        pageSize: 10

      },
      options: [
        { label: '全部', val: '0' },
        { label: '入库', val: '1' },
        { label: '出库', val: '2' },
        { label: '盘点', val: '3' },
      ],
      total: 0,
      timeStart: '', timeEnd: '', type: ''

    }
  }
  componentDidMount() {
    this.getDate(this.props.match.params.id)
  }

  async getDate(id) {
    let { pageNo, pageSize } = this.state.pageData
    let { type, timeStart, timeEnd } = this.state
    let res = await apiStockLibraryGoodsDetilList({ type: type ? type : '', timeEnd, timeStart, libraryGoodsId: this.props.match.params.id, pageNo, pageSize })
    if (res.code === 0) {
      this.setState({
        dataSource: res.data.list,
        total: res.totalCount
      })
    }
  }

  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo, pageSize
      }
    }, () => {
      this.getDate()
    })
  };
  onFinishSearch = (values) => {
    console.log(values);
    let { times, type } = values
    this.setState({
      type,
      timeStart: times && times.length > 0 ? moment(times[0]).format('yyyy-MM-DD') + ' 00:00:00' : '',
      timeEnd: times && times.length > 0 ? moment(times[1]).format('yyyy-MM-DD') + ' 23:59:59' : ''
    }, () => {
      this.pageChange(1, 10)
    })
  }
  reset = () => {
    this.FormRef.current.setFieldsValue({
      type: '0',
      times: []
    })
    this.setState({
      type: '',
      timeStart: '',
      timeEnd: ''
    }, () => {
      this.pageChange(1, 10)
    })
  }
  render() {
    let { columns, dataSource, pageData, total, options } = this.state
    return (
      <div className="p-layout-box commodity-examine">
        <GoBack history={this.props.history} title="库存盘点详情" />
        <Form layout={'inline'} ref={this.FormRef} onFinish={this.onFinishSearch} style={{ marginBottom: 12, marginTop: 12 }}>
          <Form.Item name={"type"}>
            <Select placeholder="类型" defaultValue={'0'} style={{ width: 200 }}>
              {options.map(item => <Option value={item.val}>{item.label}</Option>)}
            </Select>
          </Form.Item>
          <Form.Item name={"times"}>
            <RangePicker
              format="YYYY-MM-DD"
            />
          </Form.Item>
          <Form.Item >
            <Button type="primary" htmlType="submit">
              搜索
            </Button>
            <Button onClick={() => this.reset()} style={{ marginLeft: 12 }}>重置</Button>
          </Form.Item>
        </Form>
        <TheTable
          scroll={{ x: "max-content", y: '63vh' }}
          columns={columns}
          dataSource={dataSource}
        />
        <ThePagination
          pageNo={pageData.pageNo}
          pageSize={pageData.pageSize}
          total={total}
          pageChange={this.pageChange}
        />
      </div>
    );
  }
}
